<template>
  <card title="新增文章列表" class="p-0 border-0" header-class="bg-white border-0">
    <form>
      <form-row-input label-text="标题:" placeholder="请输入标题" v-model="article.title"></form-row-input>
      <form-row-select label-text="类目:" :options="categories" v-model="article.category"></form-row-select>
      <form-row-switch label-text="热门:" data-id="hot" v-model="article.hot"></form-row-switch>
      <div class="form-group row">
        <button class="btn btn-primary offset-3" @click="submit" type="button">提交</button>
      </div>
    </form>
  </card>
</template>

<script>

import Card from '@/components/Card';
import FormRowInput from '@/components/FormRowInput';
import FormRowSelect from '@/components/FormRowSelect';
import FormRowSwitch from '@/components/FormRowSwitch';

export default {
  name: "ArticleEdite",
  components:{
    Card,
    FormRowInput,
    FormRowSelect,
    FormRowSwitch
  },
  mounted() {
    let id = this.$route.params.id;
    if (id !== undefined) {
      this.article = this.articles[id];
    }
  },
  data: function() {
    return {
      article: { title: "", category: 0, hot: false },
      categories: this.$parent.categories,
      articles:this.$parent.articles
    };
  },
  methods: {
    submit() {
      let id = this.$route.params.id;
      if (id === undefined) {
        this.articles.push(this.article);
      }
      this.$router.push({ path: "/article/list" });
    }
  }
};
</script>